<template>
  <main>
    <div class="main">
      <div class="section-content">
        <div class="search-input-wrapper">
          <a-input-search
            placeholder="请输入关键字"
            :allowClear="true"
            v-model="searchKeywords"
            @focus="searchInputOnFocus"
            @change="searchInputChange"
            @blur="searchInputOnBlur"
          />
        </div>

        <div>
          <menu-bar-pc :selectedIndex.sync="selectedIndex" :items="categories" :itemClick="menuItemClick"></menu-bar-pc>
        </div>

        <div class="collection">
          <div class="container">
            <div class="cell" v-for="(item, index) in items" :key="index" @click="itemClick(item)">
              <a-image :src="item.cover" :alt="item.cover" />
              <p class="cell-headline">{{ item.enterpriseName }}</p>
              <p>{{ item.companyIndustry }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'List',
  data() {
    return {
      selectedIndex: 0,
      searchKeywords: '',
    }
  },
  components: {},

  computed: {
    ...mapState('industry', {
      categories: (state) => state.categories,
    }),
    ...mapState('allianceMember', {
      items: (state) => state.items,
      pageSize: (state) => state.pageSize,
      pageTotal: (state) => state.pageTotal,
      currentPage: (state) => state.currentPage,
    }),
  },
  created() {
    this.getIndustryCategoryListAction({ pageNo: 1, pageSize: 99 })
    this.updateList()
  },

  methods: {
    ...mapActions('industry', ['getIndustryCategoryListAction']),
    ...mapActions('allianceMember', ['getAllianceMemberListAction']),

    itemClick(item) {
      this.$router.push({
        path: '/shop/home',
        query: { id: item.id },
      })
    },

    menuItemClick(item, index) {
      this.selectedIndex = index
      const isRefresh = true
      this.updateList(isRefresh)
    },
    paginationOnChange(page, pageSize) {
      this.updateCurrentPageAction(page)
      this.updateList()
    },

    searchInputOnFocus() {
      this.isSearching = true
      this.updateCurrentPageAction(1)
    },

    searchInputOnBlur() {
      this.isSearching = false
    },

  

    filterMember(item, index) {
      this.updateCurrentPageAction(1)
      this.selectedIndex = index
      if (item.gcId) {
        this.updateList(item.gcId)
      }
    },

    currentChange(value) {
      this.updateCurrentPageAction(value)
      if (this.selectedIndex !== -1) {
        const item = this.categories[this.selectedIndex]
        this.updateList(item.gcId)
      } else {
        this.updateList()
      }
    },

    searchClear() {
      console.log('searchClear selectedIndex' + this.selectedIndex)
      const item = this.categories[this.selectedIndex]
      this.updateList(item.gcId)
    },

    searchInputChange() {
      console.log('searchInputChange' + this.selectedIndex)
      const item = this.categories[this.selectedIndex]
      this.updateList(item.gcId)
    },
    searchClick() {
      console.log('searchClick' + this.selectedIndex)
      const item = this.categories[this.selectedIndex]
      this.updateList(item.gcId)
    },

    updateList() {
      const that = this
      var categoryId = null
      const items = this.categories
      const selectedIndex = this.selectedIndex
      if (items && Array.isArray(items) && items.length > 0 && selectedIndex >= 0 && selectedIndex < items.length) {
        const item = items[selectedIndex]
        categoryId = item.id
      }

      const parameters = {
        industryCategoryId: categoryId,
        pageNo: '1',
        pageSize: '10',
      }

      const isRefresh = true
      const isPC = true
      this.getAllianceMemberListAction({ isRefresh, parameters, isPC }).catch((error) => {
        that.$message.error(error.message)
      })
    },
  },
}
</script>

<style scoped lang="less">
.demand-type {
  font-size: 14px;
  display: flex;
}
.demand-type > p {
  margin-right: 20px;
  line-height: 2;
}

.cell-headline {
  height: 24px;
}
.activity-selected {
  color: var(--r-primary-color);
  font-weight: 500;
}
</style>
